
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>3d(demo)</title>
  <style>
    body {
      margin: 0;
      background:red;
      overflow: hidden;
    }
  </style>
 <script src="js/three.min.js"></script>
 <script src="js/OrbitControls.js"></script>
 <script src="js/GLTFLoader.js"></script>

 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 <script>
   setTimeout(function(){
    //  wx.miniProgram.navigateTo({url: '/pages/index/index?phone=18012121212'})
   },3000)
 </script>
</head>
 
<body>
  <div id="canvasCnt" style="width:100vw;height:100vh;"></div>

  <script>

  // setThree3d('images/RobotExpressive.glb');
  // setThree3d('images/RobotExpressive.glb');
  setThree3d('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb');

  function setThree3d(glburl){

    /**
     * 创建场景对象Scene
     */
     var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    // var geometry = new THREE.BoxGeometry(5,5,5); //创建一个立方体几何对象Geometry
    // var material = new THREE.MeshLambertMaterial({
    //   color: 0x000ff0
    // }); //材质对象Material
    // var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    // scene.add(mesh); //网格模型添加到场景中

    
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0xffffff);  //0x000000
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = (document.body.clientWidth) * 1; //窗口宽度
    var height = (document.body.clientHeight) * 0.7; //窗口高度
    // alert(width)
    // alert(height)
    // console.log(width,height,'宽高')
    // var height = 700; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 4; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(0, 0, 200); //设置相机位置  左右 上下 
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)


    /**
     * 创建渲染器对象
     */
     var loader = new THREE.GLTFLoader();


    loader.load( glburl, function ( gltf ) {
        // gltf.scene.name = '3dmodel';
        // this.setContent(gltf.scene);
        var cube = gltf.scene;
        // cube.position.y = 10;
        scene.translateY(-2);//沿着x轴正方向平移距离100  translateY Y轴移动 正向上 负向下
        scene.add(cube);
       
        // scene.add( gltf.scene );
        // console.log('模型加载完毕')



         var renderer = new THREE.WebGLRenderer();
         renderer.setSize(width, height);//设置渲染区域尺寸
         renderer.setClearColor(0xb9f3ff, 1); //设置背景颜色


        renderer.domElement.style.width = '100%';  //这里的百分比需要和上面的百分比width一样
        renderer.domElement.style.height = '70%';  //这里的百分比需要和上面的百分比height一样
        console.log(renderer.domElement,'renderer.domElement')
        document.getElementById('canvasCnt').appendChild(renderer.domElement); //body元素中插入canvas对象
        function render() {
          renderer.render(scene,camera);//执行渲染操作
         // scene.rotateY(0.01);//每次绕y轴旋转0.01弧度
          requestAnimationFrame(render);//请求再次执行渲染函数render
        }
        render();
        
        var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象

    }, undefined, function ( e ) {
        console.error( e );
    } );







        //执行渲染操作   指定场景、相机作为参数
    //    renderer.render(scene, camera);
    //    function render() {
      //  	renderer.render(scene,camera);//执行渲染操作
      // }
      // render();
      // var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
      // controls.addEventListener('change', render);//监听鼠标、键盘事件


    // 已经通过requestAnimationFrame(render);周期性执行render函数，没必要再通过监听鼠标事件执行render函数
    // controls.addEventListener('change', render)
  }






  </script>
</body>
</html>